<template>
  <div class="homeContainer">
    <div class="homeContainer__left" :style="{ height: screenHeight + 'px' }">
      <el-menu
        default-active="2"
        class="el-menu-vertical-demo"
        :collapse="isCollapse"
        @open="handleOpen"
        @close="handleClose"
        :unique-opened="true"
        text-color="#fff"
        background-color="#001529"
        :style="{ height: screenHeight + 'px' }"
      >
        <div class="homeContainer__left__headImg">
          <img src="../assets/vue.svg" alt="" />
        </div>
        <el-menu-item index="/" @click="router.push('/')">
          <el-icon><icon-menu /></el-icon>
          <template #title>概况</template>
        </el-menu-item>
        <el-sub-menu index="shop">
          <template #title>
            <el-icon><Shop /></el-icon>
            <span>店铺管理</span>
          </template>
          <el-menu-item index="shop-op1" @click="router.push('/shop-op1')"
            >店铺信息</el-menu-item
          >
          <el-menu-item index="shop-op2" @click="router.push('/shop-op2')"
            >进件管理</el-menu-item
          >
          <el-menu-item index="shop-op3" @click="router.push('/shop-op3')"
            >支付设置</el-menu-item
          >
          <el-menu-item index="shop-op4" @click="router.push('/shop-op4')"
            >业务设置</el-menu-item
          >
          <el-menu-item index="shop-op5" @click="router.push('/shop-op5')"
            >关联设置</el-menu-item
          >
          <el-menu-item index="shop-op6" @click="router.push('/shop-op6')"
            >点单设置</el-menu-item
          >
        </el-sub-menu>
        <el-sub-menu index="3">
          <template #title>
            <el-icon><Ticket /></el-icon>
            <span> 商品管理 </span>
          </template>
          <el-menu-item index="3-1" @click="router.push('/commodity')"
            >商品库</el-menu-item
          >
          <el-menu-item index="3-2" @click="router.push('/3-2')"
            >商品分类</el-menu-item
          >
          <el-menu-item index="3-3" @click="router.push('/3-3')"
            >品牌管理</el-menu-item
          >
        </el-sub-menu>
        <el-sub-menu index="4">
          <template #title>
            <el-icon><List /></el-icon>
            <span> 订单管理 </span>
          </template>
          <el-menu-item index="4-1" @click="router.push('/4-1')"
            >订单查询</el-menu-item
          >
          <el-menu-item index="4-2" @click="router.push('/4-2')"
            >堂食订单</el-menu-item
          >
          <el-menu-item index="4-3" @click="router.push('/4-3')"
            >自提订单</el-menu-item
          >
          <el-menu-item index="4-4" @click="router.push('/4-4')"
            >外卖订单</el-menu-item
          >
          <el-menu-item index="4-5" @click="router.push('/4-5')"
            >订单评价</el-menu-item
          >
          <el-menu-item index="4-6" @click="router.push('/4-6')"
            >配送管理</el-menu-item
          >
        </el-sub-menu>
        <el-menu-item index="5" @click="router.push('/vip')">
          <el-icon><UserFilled /></el-icon>
          <template #title>会员中心</template>
        </el-menu-item>
        <el-sub-menu index="6">
          <template #title>
            <el-icon><Histogram /></el-icon>
            <span> 数据管理 </span>
          </template>
          <el-menu-item index="6-1">营业数据</el-menu-item>
          <el-menu-item index="6-2">会员数据</el-menu-item>
          <el-menu-item index="6-3">现金红包</el-menu-item>
          <el-menu-item index="6-4">消费红包</el-menu-item>
          <el-menu-item index="6-5">商品数据</el-menu-item>
          <el-menu-item index="6-6">门店分佣</el-menu-item>
          <el-menu-item index="6-7">提现数据</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="7" @click="router.push('/property')">
          <el-icon><Money /></el-icon>
          <template #title>资产管理</template>
        </el-menu-item>
        <el-sub-menu index="8">
          <template #title>
            <el-icon><VideoCameraFilled /></el-icon>
            <span> 营销管理 </span>
          </template>
          <el-menu-item index="8-1">活动设置</el-menu-item>
          <el-menu-item index="8-2">广告管理</el-menu-item>
          <el-menu-item index="8-3">现金红包</el-menu-item>
          <el-menu-item index="8-4">淘宝CPS</el-menu-item>
        </el-sub-menu>
        <el-sub-menu index="9">
          <template #title>
            <el-icon><Platform /></el-icon>
            <span> 设备操作 </span>
          </template>
          <el-menu-item index="9-1">活动设置</el-menu-item>
          <el-menu-item index="9-2">广告管理</el-menu-item>
        </el-sub-menu>
      </el-menu>
    </div>
    <div class="homeContainer__right">
      <div class="homeContainer__right__topBox">
        <div class="homeContainer__right__topBox__left">
          <div
            class="homeContainer__right__topBox__left__showBtn"
            @click="
              () => {
                isCollapse = !isCollapse;
              }
            "
          >
            <el-icon v-if="isCollapse"><Expand /></el-icon>
            <el-icon v-else><Fold /></el-icon>
          </div>
          <div class="homeContainer__right__topBox__left__text">
            <el-breadcrumb :separator-icon="ArrowRight">
              <el-breadcrumb-item :to="{ path: '/' }"
                >主页面</el-breadcrumb-item
              >
              <el-breadcrumb-item>页面1</el-breadcrumb-item>
              <el-breadcrumb-item>页面2</el-breadcrumb-item>
              <el-breadcrumb-item>页面3</el-breadcrumb-item>
            </el-breadcrumb>
          </div>
        </div>
        <div class="homeContainer__right__topBox__right">
          <div class="homeContainer__right__topBox__right__btn">
            <el-row class="mb-4">
              <el-button type="success">营业中</el-button>
              <el-button type="info">暂停营业</el-button>
            </el-row>
          </div>
          <div class="homeContainer__right__topBox__right__login">
            <img src="../assets/vue.svg" alt="" />
            <div class="homeContainer__right__topBox__right__login__user">
              <div
                class="homeContainer__right__topBox__right__login__user__name"
              >
                王小明
              </div>
              <div
                class="homeContainer__right__topBox__right__login__user__exit"
              >
                退出
              </div>
            </div>
          </div>
        </div>
      </div>
      <router-view> </router-view>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance } from "vue";
import {
  Menu as IconMenu,
  Shop,
  Ticket,
  List,
  UserFilled,
  Histogram,
  Money,
  VideoCameraFilled,
  Platform,
  Expand,
  Fold,
  DataLine,
  QuestionFilled,
  CaretRight,
} from "@element-plus/icons-vue";
import { ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";

const router = useRouter();
const isCollapse = ref(false);
onMounted(() => {
  const instance = getCurrentInstance();
  //   console.log(instance.refs.businessBoxs);
});

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath);
};
const handleClose = (key, keyPath) => {
  console.log(key, keyPath);
};
// 获取屏幕长度
const screenHeight = ref(null);
screenHeight.value = window.innerHeight;
document.addEventListener("resize", () => {
  console.log(111);
  screenHeight.value = window.innerHeight;
});
</script>
<style lang="scss" scoped>
.homeContainer {
  display: flex;
  overflow: hidden;
  &__left {
    &__headImg {
      padding: 20px 0;
      text-align: center;
    }
  }
  &__right {
    flex-grow: 1;
    display: flex;
    background-color: #ebe7e3b7;
    flex-direction: column;
    align-items: center;
    &__topBox {
      width: 100%;
      min-width: 1200px;
      height: 77px;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      box-sizing: border-box;
      &__left {
        display: flex;
        align-items: center;
        &__showBtn {
          font-size: 30px;
          height: 35px;
        }
        &__text {
          display: flex;
          align-items: center;
          margin-left: 10px;
        }
      }
      &__right {
        display: flex;
        &__login {
          display: flex;
          margin-left: 50px;
          img {
            width: 35px;
            height: 35px;
            border-radius: 50%;
            box-sizing: border-box;
            padding: 1px;
          }
          &__user {
            font-size: 12px;
            margin: 0 15px;
            align-items: center;
          }
        }
      }
    }
  }
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 160px;
  position: sticky;
  top: 0;
}
</style>
